<link rel='import' href='../../bower/polymer/polymer.html'>
<link rel='import' href='../../bower/core-tooltip/core-tooltip.html'>
<link rel='import' href='../../bower/core-icons/core-icons.html'>
<link rel='import' href='../../bower/core-signals/core-signals.html'>
<link rel='import' href='button.html'>
<link rel='import' href='dialog.html'>
<link rel='import' href='faq-link.html'>

<polymer-element name='uproxy-troubleshoot' attributes='titleText'>
  <template>
    <style>
    :host {
      text-align: center;
    }
    h1 {
      font-size: 1.5em;
      margin-top: 1.4em;
    }
    core-icon[icon="clear"] {
      float: right;
    }
    core-icon[icon="help"] {
      height: 15px !important;
      width: 15px !important;
    }
    core-icon[icon="help"],
    core-icon[icon="clear"] {
      color: grey;
      opacity: 0.6;
      margin-bottom: 2px;
      -webkit-transition: all 0.23s !important;
      -moz-transition: all 0.23s !important;
      transition: all 0.23s !important;
    }
    core-icon[icon="help"]:hover,
    core-icon[icon="clear"]:hover {
      opacity: 1;
    }
    core-icon.button {
      cursor: pointer;
    }
    uproxy-button {
      margin: 10px 2px 3px 2px;
      font-size: 12px;
    }
    uproxy-dialog {
      top: 20%;
      min-width: 305px;
      z-index: 1002; /* Must be greater than core-overlay-backdrop */
    }
    uproxy-dialog::shadow #scroller {
      padding: 12px;
    }
    #askToAnalyze, #analyzeNetwork, #analyzedNetwork {
      padding: 0px 15px 15px;
      color: rgba(0,0,0,0.55);
    }
    #analyzeNetwork {
      text-align: center;
      font-size: 14px;
    }
    #analyzedNetwork {
      text-align: left;
    }
    #analyzedNetworkButtons {
      text-align: center;
    }
    uproxy-faq-link .linkText {
      text-decoration: underline;
      color: rgba(0,0,0,0.40);
    }
    </style>

    <!-- Listen for the 'open-troubleshoot' event, which the user can trigger after proxying fails. -->
    <core-signals on-core-signal-open-troubleshoot='{{ open }}'></core-signals>

    <uproxy-dialog backdrop layered='false' id='troubleshootDialog'>
      <core-icon class="button" icon="clear" on-tap='{{ close }}'></core-icon>
      <h1>{{ titleText }}</h1>

      <!-- First screen in the dialog asks user if they want to diagnose their network. -->
      <div id='askToAnalyze' hidden?='{{ analyzingNetwork || analyzedNetwork }}'>
        <p>
          {{ "ASK_TO_ANALYZE" | $$(model.globalSettings.language) }}
          <uproxy-faq-link anchor='doesUproxyLogData'>
            <core-icon icon="help"></core-icon>
          </uproxy-faq-link><br>
        </p>
        <uproxy-button on-tap='{{ getNatType }}'>
          {{ "YES" | $$(model.globalSettings.language) }}
        </uproxy-button>
        <uproxy-button on-tap='{{ close }}'>
          {{ "NO" | $$(model.globalSettings.language) }}
        </uproxy-button>
      </div>

      <!-- Second screen in dialog shows a loading bar as we get NAT type. -->
      <div id='analyzeNetwork' hidden?='{{ !analyzingNetwork }}'>
        {{ "ANALYZING_NETWORK" | $$(model.globalSettings.language) }}<br>
        <paper-progress indeterminate='true'></paper-progress>
      </div>

      <!-- Third screen in dialog shows NAT type and asks user if they want to submit feedback. -->
      <div id='analyzedNetwork' hidden?='{{ !analyzedNetwork }}'>
        {{ "ANALYSIS_RESULTS" | $$(model.globalSettings.language, { natType: natType, natImpact: natImpact }) }}
        <uproxy-faq-link anchor='doesUproxyLogData'>
          <span class='linkText'>{{ "MORE_INFO" | $$(model.globalSettings.language) }}</span>
        </uproxy-faq-link><br><br>
        {{ "ASK_TO_SUBMIT_ANALYSIS" | $$(model.globalSettings.language) }}
        <uproxy-faq-link anchor='doesUproxyLogData'>
          <span class='linkText'>{{ "PRIVACY_POLICY" | $$(model.globalSettings.language) }}</span>
        </uproxy-faq-link>
        <br>
        <div id='analyzedNetworkButtons'>
          <uproxy-button on-tap='{{ submitFeedback }}'>
            {{ "YES" | $$(model.globalSettings.language) }}
          </uproxy-button>
          <uproxy-button on-tap='{{ close }}'>
            {{ "NO" | $$(model.globalSettings.language) }}
          </uproxy-button>
        </div>
      </div>

    </uproxy-dialog>

  </template>
  <script src='troubleshoot.js'></script>
</polymer-element>
